@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif; /* Professional sans-serif font */
}

body {
    background: linear-gradient(90deg, #F0F2F5, #DDE1E6); /* Soft, professional gradient */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%; /* Ensure container fills body */
}

.screen {
    background: #FFFFFF; /* Clean white background */
    position: relative;
    height: 520px; /* Slightly adjusted height */
    width: 380px; /* Slightly adjusted width */
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); /* Softer, more elegant shadow */
    border-radius: 12px; /* Rounded corners for a modern touch */
    overflow: hidden; /* Hide any overflowing background elements */
}

.screen__content {
    z-index: 1;
    position: relative;
    height: 100%;
    padding: 40px; /* Add padding for better spacing */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Remove or significantly simplify background shapes */
.screen__background {
    display: none; /* Hide for a cleaner look */
}
/* If you want very subtle abstract shapes, you could define them here with muted colors. */

.login {
    width: 100%; /* Adjust to fill content area */
    padding-top: 0; /* Remove top padding from original */
}

.login__field {
    position: relative;
    margin-bottom: 25px; /* Increased spacing between fields */
}

.login__icon {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    color: #8C9BB7; /* Muted icon color */
    font-size: 18px; /* Slightly larger icon */
}

.login__input {
    border: 1px solid #D1D4DA; /* Subtle border */
    border-radius: 8px; /* Rounded input fields */
    background: #F8F9FA; /* Light background for input */
    padding: 12px 12px 12px 35px; /* Adjust padding for icon */
    font-weight: 400; /* Lighter font weight */
    width: 100%; /* Full width */
    transition: all .3s ease; /* Smooth transition for focus */
    font-size: 16px;
    color: #333333;
}

.login__input:focus {
    outline: none;
    border-color: #007BFF; /* A professional blue on focus */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* Subtle focus shadow */
    background: #FFFFFF;
}

.login__submit {
    background: #0056b3; /* Darker blue for the button */
    color: #FFFFFF; /* White text */
    font-size: 16px;
    margin-top: 25px; /* Adjusted margin */
    padding: 14px 20px;
    border-radius: 8px; /* Rounded button */
    border: none; /* No border */
    text-transform: uppercase;
    font-weight: 700;
    width: 100%;
    cursor: pointer;
    transition: background-color .3s ease, box-shadow .3s ease;
    box-shadow: 0px 4px 15px rgba(0, 86, 179, 0.2); /* Softer shadow for button */
}

.login__submit:hover {
    background: #003F8C; /* Slightly darker blue on hover */
    box-shadow: 0px 6px 20px rgba(0, 86, 179, 0.3);
}

.login__submit:active {
    background: #002C66;
}

/* Remove social login elements or redesign if absolutely necessary for notary */
.social-login {
    display: none; /* Hide social login for a professional notary site */
}